<template>
    <div>
        <div :style="listbox">
            <div :style="titlebox">
                处&nbsp;&nbsp;理&nbsp;&nbsp;记&nbsp;&nbsp;录
            </div>
            <div :style="contentbox">
                <div :style="[col,space1]">
                    <div :style="[lable,searchlable1]">处理人：</div>
                      <div :style="[lable,searchtext1] ">
                      <input :style="[input,searchinput1]" v-model="userLoginName" type="text" placeholder="请输入处理人" value="">
                    </div>
                    <div :style="[lable,searchlable2]">处理日期：</div>
                      <div :style="[lable,searchtext2] ">
                      <input :style="[input,searchinput1]" v-model="processingDatetime" type="date" placeholder="请选择处理日期" value="">
                    </div>
                    <div :style="[lable,searchlable3]">报警类型：</div>
                    <div :style="[lable,searchtext3] ">
                        <select v-model="processingType" :style="[input,searchselect1]">
                            <option value =-1>全部</option>
                            <option value =0>甲醛浓度</option>
                            <option value =1>SO2腐蚀性气体</option>
                            <option value =2>H2S腐蚀性气体</option>
                            <option value =3>CL2腐蚀性气体</option>
                            <option value =4>HCL腐蚀性气体</option>
                            <option value =5>烟雾浓度</option>
                        </select>
                    </div>
                    <div :style="[lable,searchlable4]" v-if="danqianzhuangt">当前状态：</div>
                    <div :style="[lable,searchtext4]" v-if="danqianzhuangt1">
                      <select v-model="processingDelete" :style="[input,searchselect1]">
                        <option value =-1>全部</option>
                        <option value =0>未删除</option>
                        <option value =1>已删除</option>
                      </select>
                    </div>
                </div>
                <div :style="[col,space1]">
                    <div :style="[lable,createBut1]">
                        <button v-on:click="search()" type="button" :style="btn1">搜索记录</button>
                    </div>
                </div>
                <div :style="[tablebox,space1]">
                  <table>
                      <tr :style="tr1">
                        <th v-for='(item,ind) in columnList' :key="ind" :style="setThStyle(item)">{{item}}</th>
                        <th v-if="caozuo1" :style="setThStyle('操作')">操作</th>
                      </tr>
                      <tr v-for='(item,index) in inforList' :key="index" :style="setTrStyle(index)">
                        <td v-for='(it,ind) in columnList' :key="ind" :style="setTdStyle()">{{item[it]}}</td>
                        <span v-if="caozuo2" v-on:click="deleteOrRecoveryProcessin(myUserId,item['processingId'],item['processingDeleteSign'])">{{item['操作']}}</span>
                      </tr>
                  </table>
                </div>
                <div :style="page" v-if="lastPage">
                    <span v-on:click="gotoNextPage();">下一页</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span v-on:click="gotoLastPage();">尾页</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input :style="[input,searchinput2]" type="text"  value="" v-model="gotoNum" @input="gotoNum=$event.target.value.replace(/\D+/, '')">
                    <button v-on:click="gotoPage();" type="button" :style="btn2">跳转</button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span :style="textspan">{{glPageIndex+1}}/{{glAllPage}}页 共{{allNum}}条</span>
                </div>
                <div :style="page" v-if="firstPage">
                    <span v-on:click="gotoFirstPage();">首页</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span v-on:click="gotoAgoPage();">上一页</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input :style="[input,searchinput2]" type="text"  value="" v-model="gotoNum" @input="gotoNum =$event.target.value.replace(/\D+/, '')">
                    <button v-on:click="gotoPage();" type="button" :style="btn2">跳转</button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span :style="textspan">{{glPageIndex+1}}/{{glAllPage}}页 共{{allNum}}条</span>
                </div>
                <div :style="page" v-if="nextPage">
                    <span v-on:click="gotoFirstPage();">首页</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span v-on:click="gotoAgoPage();">上一页</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span v-on:click="gotoNextPage();">下一页</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span v-on:click="gotoLastPage();">尾页</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input :style="[input,searchinput2]" type="text"  value="" v-model="gotoNum" @input="gotoNum = $event.target.value.replace(/\D+/, '')">
                    <button v-on:click="gotoPage();" type="button" :style="btn2">跳转</button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span :style="textspan">{{glPageIndex+1}}/{{glAllPage}}页 共{{allNum}}条</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
import swal from 'sweetalert'
export default {
  name: 'processingrecord',
  mounted () {
    this.sessionId = this.$route.query.username
    this.sign = this.$route.query.sign
    if (this.sign === '1') {
      this.caozuo1 = false
      this.caozuo2 = false
      this.columnList = ['处理人', '报警处理时间', '报警时间', '处理结果', '报警类型']
      this.processingDelete = 0
      this.danqianzhuangt = false
      this.danqianzhuangt1 = false
    }
    this.getProcessingList()
  },
  methods: {
    deleteOrRecoveryProcessin: function (myUserId, processingId, processingDelete) {
      let postData = {
        processingId: processingId,
        myUserId: myUserId,
        processingDelete: processingDelete,
        sessionId: this.sessionId
      }
      this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-processingrecord//deleteOrRecoveryProcessin', {
        params: {
          ...postData
        }
      }).then((response) => {
        if (response.data.message === 'success') {
          swal({title: '提示', text: response.data.success, icon: 'success', button: '确定'}).then(() => {
            this.getProcessingList()
          })
        }
      }).catch(error => {
        if (error.response.status === 401) {
          swal({title: '提示', text: '页面过期请重新登录', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        } else if (error.response.status === 402) {
          swal({title: '提示', text: '非法访问强制退出', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        }
      })
    },
    search: function () {
      this.pageIndex = 0
      this.getProcessingList()
    },
    setTdStyle: function () {
      return 'color: #AAAAAA'
    },
    setTrStyle: function (index) {
      if (index % 2 === 0) {
        return 'background: #0B2945'
      }
    },
    gotoAgoPage: function () {
      this.pageIndex = this.glPageIndex - 1
      this.getProcessingList()
    },
    gotoNextPage: function () {
      this.pageIndex = this.glPageIndex + 1
      this.getProcessingList()
    },
    gotoLastPage: function () {
      this.pageIndex = this.glAllPage - 1
      this.getProcessingList()
    },
    gotoFirstPage: function () {
      this.pageIndex = 0
      this.getProcessingList()
    },
    gotoPage: function () {
      let page = this.gotoNum
      if (!(/^\d*$/.test(page))) {
        swal({title: '警告', text: '页码必须为正整数！', icon: 'warning', button: '确定'})
        return
      }
      if (page === '') {
        swal({title: '警告', text: '请输入页码！', icon: 'warning', button: '确定'})
        return
      }
      if (Number(page) === 0) {
        swal({title: '警告', text: '页码不能为0！', icon: 'warning', button: '确定'})
        return
      }
      if (Number(page) > this.glAllPage) {
        swal({title: '警告', text: '超过最大页码！', icon: 'warning', button: '确定'})
        return
      }
      this.pageIndex = Number(page) - 1
      this.getProcessingList()
    },
    getProcessingList: function () {
      let postData = {
        processingType: this.processingType,
        processingDatetime: this.processingDatetime,
        processingDelete: this.processingDelete,
        userLoginName: this.userLoginName,
        pageIndex: this.pageIndex,
        everyPageDataCount: this.everyPageDataCount,
        sessionId: this.sessionId
      }
      this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-processingrecord//queryprocessingList', {
        params: {
          ...postData
        }
      }).then((response) => {
        this.allPage = response.data.allPage
        this.pageIndex = response.data.pageIndex
        this.glAllPage = this.allPage
        this.glPageIndex = this.pageIndex
        this.allNum = response.data.allNum
        this.myUserId = response.data.userId
        if (this.allPage > 1) {
          if (this.pageIndex === 0) {
            this.lastPage = true
            this.nextPage = false
            this.firstPage = false
          } else if (this.pageIndex === this.allPage - 1) {
            this.firstPage = true
            this.lastPage = false
            this.nextPage = false
          } else {
            this.nextPage = true
            this.firstPage = false
            this.lastPage = false
          }
        } else {
          this.firstPage = false
          this.lastPage = false
          this.nextPage = false
        }
        let list = response.data.list
        if (this.sign === '1') {
          this.inforList = [{ '处理人': '', '报警处理时间': '', '报警时间': '', '处理结果': '', '报警类型': '' }]
        } else {
          this.inforList = [{ '处理人': '', '报警处理时间': '', '报警时间': '', '处理结果': '', '报警类型': '', '当前状态': '' }]
        }
        for (var i = 0; i < list.length; i++) {
          let processingType = ''
          switch (list[i].alertPo.alertType) {
            case 0:
              processingType = '甲醛浓度'
              break
            case 1:
              processingType = 'SO2腐蚀性气体'
              break
            case 2:
              processingType = 'H2S腐蚀性气体'
              break
            case 3:
              processingType = 'CL2腐蚀性气体'
              break
            case 4:
              processingType = 'HCL腐蚀性气体'
              break
            case 5:
              processingType = '烟雾浓度'
              break
          }

          let processingDelete = '未删除'
          let caozuo1 = '删除数据'
          let processingDeleteSign = 0
          if (list[i].processingDelete === 0) {
            processingDeleteSign = 1
          } else {
            processingDelete = '已删除'
            caozuo1 = '恢复数据'
          }
          let processingState
          if (list[i].processingState === 0) {
            processingState = '人工处理'
          } else {
            processingState = '自动恢复'
          }
          let userLoginName = ''
          if (list[i].userPo !== null) {
            userLoginName = list[i].userPo.userLoginName
          }
          if (this.sign === '1') {
            this.inforList[i] = { '处理人': userLoginName, 
            '报警处理时间': list[i].processingDatetime, 
            '报警时间': list[i].alertPo.alertDateTimer, 
            '处理结果': processingState, 
            '报警类型': processingType, 
            'processingDelete': list[i].processingDelete,
            'processingId': list[i].processingId,
            'processingDeleteSign': processingDeleteSign
            }
          } else { []
            this.inforList[i] = { '处理人': userLoginName, 
            '报警处理时间': list[i].processingDatetime, 
            '报警时间': list[i].alertPo.alertDateTimer, 
            '处理结果': processingState, 
            '报警类型': processingType, 
            '当前状态': processingDelete,
            '操作': caozuo1,
            'processingDelete': list[i].processingDelete,
            'processingId': list[i].processingId,
            'processingDeleteSign': processingDeleteSign
            }
          }
        }
      }).catch(error => {
        if (error.response.status === 401) {
          swal({ title: '提示', text: '页面过期请重新登录', icon: 'warning', button: '确定' }).then(() => {
            this.$router.push({ path: '/' })
          })
        } else if (error.response.status === 402) {
          swal({ title: '提示', text: '非法访问强制退出', icon: 'warning', button: '确定' }).then(() => {
            this.$router.push({ path: '/' })
          })
        }
      })
    }
  },
  data () {
    return {
      caozuo1: true,
      caozuo2: true,
      danqianzhuangt: true,
      danqianzhuangt1: true,
      sign: '',
      sessionId: '',
      columnList: ['处理人', '报警处理时间', '报警时间', '处理结果', '报警类型', '当前状态'],
      processingDelete: -1,
      gotoNum: '',
      inforList: '',
      allPage: 0,
      pageIndex: 0,
      glPageIndex: 0,
      glAllPage: 0,
      allNum: 0,
      everyPageDataCount: 10,
      firstPage: false,
      lastPage: false,
      nextPage: false,
      processingType: -1,
      myUserId: '',
      processingDatetime: '',
      userLoginName: '',
      setThStyle: function (item) {
        if (item === '当前状态') {
          return 'width: 70px'
        } else if (item === '处理结果') {
          return 'width: 70px'
        } else if (item === '报警类型') {
          return 'width: 100px'
        } else if (item === '操作') {
          return 'width: 70px'
        }
      },
      page: {
        position: 'relative',
        width: '954px',
        height: '25px',
        textAlign: 'center',
        color: '#FFFFFF',
        lineHeight: '25px'
      },
      textspan: {
        cursor: 'auto !important',
        color: '#E7EC92'
      },
      btn2: {
        width: '40px',
        height: '20px',
        fontSize: '12px'
      },
      searchinput2: {
        width: '50px',
        height: '15px',
        backgroundColor: '#001B38'
      },
      tr1: {
        background: '#1E4E7F',
        color: '#E7EC92'
      },
      tr2: {
        background: '#0B2945'
      },
      tablebox: {
        position: 'relative',
        width: '954px',
        height: '315px'
      },
      createBut1: {
        width: '80px',
        right: '10px',
        height: '25px'
      },
      btn1: {
        width: '80px',
        fontSize: '14px',
        height: '25px'
      },
      searchtext4: {
        width: '150px',
        marginLeft: '780px',
        color: '#FFFFFF'
      },
      searchlable4: {
        width: '75px',
        marginLeft: '705px',
        color: '#E7EC92'
      },
      searchtext3: {
        width: '150px',
        marginLeft: '545px',
        color: '#FFFFFF'
      },
      searchlable3: {
        width: '75px',
        marginLeft: '470px',
        color: '#E7EC92'
      },
      searchtext2: {
        width: '150px',
        marginLeft: '310px',
        color: '#FFFFFF'
      },
        searchtext1: {
        width: '150px',
        marginLeft: '75px',
        color: '#FFFFFF'
      },
      searchlable2: {
        width: '75px',
        marginLeft: '235px',
        color: '#E7EC92'
      },
      searchselect1: {
        width: '150px',
        height: '25px'
      },
      searchinput1: {
        width: '150px'
      },
      searchlable1: {
        width: '75px',
        marginLeft: '0px',
        color: '#E7EC92'
      },
      input: {
        border: '1px solid #006699',
        height: '20px',
        backgroundColor: '#174A7F',
        lineHeight: '20px',
        color: '#FFFFFF',
        textIndent: '10px'
      },
      lable: {
        position: 'absolute',
        height: '25px',
        textAlign: 'center',
        lineHeight: '25px'
      },
      space1: {
        marginTop: '3px'
      },
      col: {
        position: 'relative',
        width: '954px',
        height: '25px',
        lineHeight: '25px'
      },
            titlebox: {
        position: 'absolute',
        width: '115px',
        height: '30px',
        marginLeft: '75px',
        marginTop: '-2px',
        color: '#E7EC92',
        lineHeight: '30px',
        textAlign: 'center'
      },
      listbox: {
        position: 'relative',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/13.png') + ')',
        width: '1000px',
        height: '450px',
        marginLeft: '200px',
        top: '0px'
      },
      contentbox: {
        background: '#001B38',
        position: 'absolute',
        width: '954px',
        height: '372px',
        marginLeft: '22px',
        marginTop: '48px',
      },
    };
  },
};
</script>
<style scoped>
    span:hover {
      color: #85C5E8 !important;
    }
    span{
      cursor: pointer !important;
    }
    button:focus,
    input::-moz-focus-inner, 
    button::-moz-focus-inner {
        outline: 0;
    }
    button:hover{
        background-color:#87CDF1;
    }
    button:active{
        background-color:#006699;
    }
    button{
        cursor:pointer !important;
        background-color:#3BA4EF;
        color:#FFFFFF;
        border-radius: 5px;
        border: none;
        outline: 0;
    }
    table{
        border:1px;
        width:954px;
        table-layout:fixed;
    }
    table tr{
        height:25px;
        width:100%;
        color:#FFFFFF;
    }
    table tr th{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    table tr td{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
